<浏览器>浏览器缓存

image

强制缓存

  • 当浏览器对某个资源的请求命中了强制缓存时，返回的http状态为200，在chrome的开发者工具的network里面size会显示为from cache，强缓存是利用Expires或者Cache-Control这两个http response header实现的，它们都用来表示资源在客户端缓存的有效期。

Expires：

  • Expires是http1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间，由服务器返回，用GMT格式的字符串表示，如：Expires:Thu, 31 Dec 2037 23:55:55 GMT，它的缓存原理是：
  1. 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Expires的header。
  2. 浏览器在接收到这个资源后，会把这个资源连同所有response header一起缓存下来（所以缓存命中的请求返回的header并不是来自服务器，而是来自之前缓存的header）；
  • Expires是较老的强缓存管理header，由于它是服务器返回的一个绝对时间，在服务器时间与客户端时间相差较大时，缓存管理容易出现问题。

Cache-Control：

  • Cache-Control，这是一个相对时间，在配置缓存的时候，以秒为单位，用数值表示

  • 参数：

  1. public：所有内容都将被缓存（客户端和代理服务器都可缓存）
  2. private：所有内容只有客户端可以缓存，Cache-Control的默认取值
  3. no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
  4. no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
  5. max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效
  6. s-maxage=xxx：代理服务器的缓存时间

缓存原理：

  1. 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Cache-Control的header
  2. 浏览器在接收到这个资源后，会把这个资源连同所有response header一起缓存下来；
  3. 浏览器再请求这个资源时，先从缓存中寻找，找到这个资源后，根据它第一次的请求时间和Cache-Control设定的有效期，计算出一个资源过期时间，再拿这个过期时间跟当前的请求时间比较，如果请求时间在过期时间之前，就能命中缓存，否则就不行。
  4. 如果缓存没有命中，浏览器直接从服务器加载资源时，Cache-Control Header在重新加载的时候会被更新。

Cache-Control与Expires不同

  • Cache-Control描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断，所以相比较Expires，Cache-Control的缓存管理更有效，安全一些。
  • Cache-Control优先级高于Expires。

启用强制缓存

  • 通常有2种方式来设置是否启用强缓存：
  1. 通过代码的方式，在web服务器返回的响应中添加Expires和Cache-Control Header；
  2. 通过配置web服务器的方式，让web服务器在响应资源的时候统一添加Expires和Cache-Control Header。

from memory cache与from disk cache

  • from memory cache代表使用内存中的缓存，from disk cache则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory –> disk。
  • 对于这个问题，我们需要了解内存缓存(from memory cache)和硬盘缓存(from disk cache)，如下:

内存缓存(from memory cache)：

  • 内存缓存具有两个特点，分别是快速读取和时效性：
  • 快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取。
  • 时效性：一旦该进程关闭，则该进程的内存则会清空。

硬盘缓存(from disk cache)：

  • 硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。
  • 在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

协商缓存

  • 当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304并且会显示一个Not Modified的字符串。
  • 协商缓存是利用的是【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对Header来管理的。

【Last-Modified，If-Modified-Since】

  • 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified的header，这个header表示这个资源在服务器上的最后修改时间。
  • 浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值。
  • 服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304 NotModified，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会再添加Last-Modified的header，因为既然资源没有变化，那么Last-Modified也就不会改变，这是服务器返回304时的response header。
  • 浏览器收到304的响应后，就会从缓存中加载资源。
  • 如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified Header在重新加载的时候会被更新，下次请求时，If-Modified-Since会启用上次返回的Last-Modified值。

【ETag、If-None-Match】

  • 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上ETag的header，这个header是服务器根据当前请求的资源生成的一个唯一标识，这个唯一标识是一个字符串，只要资源有变化这个串就不同，跟最后修改时间没有关系，所以能很好的补充Last-Modified的问题。
  • 浏览器再次跟服务器请求这个资源时，在request的header上加上If-None-Match的header，这个header的值就是上一次请求时返回的ETag的值。
  • 服务器再次收到资源请求时，根据浏览器传过来If-None-Match和然后再根据资源生成一个新的ETag，如果这两个值相同就说明资源没有变化，否则就是有变化；如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化。
    浏览器收到304的响应后，就会从缓存中加载资源。

Etag / If-None-Match比较

  • 其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高

注意：

  • 【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】一般都是同时启用，这是为了处理Last-Modified不可靠的情况。有一种场景需要注意：
  • 分布式系统里多台机器间文件的Last-Modified必须保持一致，以免负载均衡到不同机器导致比对失败；
  • 分布式系统尽量关闭掉ETag(每台机器生成的ETag都会不一样）；

浏览器刷新与缓存方式：

  • 当ctrl+f5(command+shift+r)强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；
    当f5(commond+r)刷新网页时，跳过强缓存，但是会检查协商缓存

参考